<template>
  <div class="error-404">
    <div class="error-content">
      <h1>404</h1>
      <h2>页面未找到</h2>
      <p>抱歉，您访问的页面不存在或已被删除。</p>
        <el-button type="primary" @click="gotoHome">返回首页</el-button>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
// 这里无需引入额外内容，el-button 需在全局已注册 Element Plus
const router =useRouter()
const gotoHome =()=>{
    console.log('跳转到首页')
    router.push({path:'/login'}); // 跳转到 /home
}
</script>

<style scoped>
.error-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6fa;
}
.error-content {
  text-align: center;
}
.error-content h1 {
  font-size: 120px;
  color: #f56c6c;
  margin-bottom: 0;
  font-weight: bold;
}
.error-content h2 {
  font-size: 32px;
  color: #333;
  margin: 16px 0 8px 0;
}
.error-content p {
  color: #888;
  margin-bottom: 32px;
}
</style>
